<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户信息管理</title>
		<!-- 引入本地资源 -->
		<!-- 引入vue.js -->
		<script src="../../js/vue.js"></script>
		<!-- 引入elementui的js资源 -->
		<script src="../../js/element/index.js"></script>
		<!-- 引入elementui的css样式 -->
		<link rel="stylesheet" href="../../css/index.css" />
		<!-- 引入网络请求库axios -->
		<script src="../../js/axios.min.js"></script>
		<!-- 引入qs，处理参数问题，将参数序列化 -->
		<script src="../../js/qs.min.js"></script>
		<style>
		  .avatar-uploader .el-upload {
		    border: 1px dashed #d9d9d9;
		    border-radius: 6px;
		    cursor: pointer;
		    position: relative;
		    overflow: hidden;
		  }
		  .avatar-uploader .el-upload:hover {
		    border-color: #409EFF;
		  }
		  .avatar-uploader-icon {
		    font-size: 28px;
		    color: #8c939d;
		    width: 178px;
		    height: 178px;
		    line-height: 178px;
		    text-align: center;
		  }
		  .avatar {
		    width: 178px;
		    height: 178px;
		    display: block;
		  }
		</style>
	</head>
	<body>
		<div id="app" style="padding: 20px;">
			<!-- 条件筛选开始... -->
			<el-form :inline="true" :model="userBean" class="demo-form-inline">
				<el-form-item label="用户名">
					<el-input v-model="userBean.username" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item label="家庭住址">
					<el-input v-model="userBean.useraddress" placeholder="请输入家庭住址"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="selectUserInfo()">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="success" @click="addUserInfo()">新增</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="warning" @click="clearUserInfo()">清空</el-button>
				</el-form-item>
			</el-form>
			<!-- 条件筛选结束... -->
			<!-- 用户信息展示开始 -->
			<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column type="index" label="#" width="50">
				</el-table-column>
				<el-table-column prop="username" label="用户名" width="120">
				</el-table-column>
				<el-table-column prop="userpwd" label="密码" width="120">
				</el-table-column>
				<el-table-column prop="usertel" label="联系方式" width="120">
				</el-table-column>
				<el-table-column prop="useraddress" label="住址" show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="用户头像">
					<template slot-scope="scope">
						 <el-image 
						    style="width: 100px; height: 100px"
						    :src="scope.row.imgsrc" 
						    >
						  </el-image>			
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click="userinfoEdit(scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click="userinfoDelete(scope.row.id)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 用户信息展示列表结束 -->
			<!-- 分页组件开始 -->
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="pageNum" :page-sizes="[2, 3, 5, 10]" :page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
			<!-- 分页组件结束 -->
			<!-- 用户新增、编辑操作需要的dialog框 -->
			<el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="75%">
				<el-form :model="editUserInfo">
					<el-form-item label="用户名" :label-width="formLabelWidth">
						<el-input v-model="editUserInfo.username" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="密码" :label-width="formLabelWidth">
						<el-input v-model="editUserInfo.userpwd" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="联系方式" :label-width="formLabelWidth">
						<el-input v-model="editUserInfo.usertel" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="家庭住址" :label-width="formLabelWidth">
						<el-input v-model="editUserInfo.useraddress" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="用户头像" :label-width="formLabelWidth">
						<el-upload class="avatar-uploader" 
						action="#"
						:show-file-list="false" 
						:http-request="uploadImg"
						:before-upload="beforeAvatarUpload">
							<img v-if="editUserInfo.imgsrc" :src="editUserInfo.imgsrc" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>

				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveUserInfo()">确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</body>
	<script>
		var app = new Vue({
			el: "#app",
			data: {
				// 用于条件查询
				userBean: {
					username: "",
					useraddress: ""
				},
				// 表格数据对象
				tableData: [],
				// 表格中的复选框
				multipleSelection: [],
				// 新增、修改的模态框进行显示的属性
				// false表示隐藏，true则进行显示
				dialogFormVisible: false,
				// 新增、编辑的数据对象
				editUserInfo: {
					// 用于判断用户是新增还是修改的操作
					id: "",
					username: "",
					userpwd: "",
					useraddress: "",
					usertel: "",
					imgsrc: ""
				},
				deleteUserInfo: {
					id: "",
					isdelete: 1
				},

				formLabelWidth: '120px',
				// 分页相关
				pageNum: 1, //当前的页码
				pageSize: 5, //每页显示得到信息条数
				total: 0 //信息共计 的数目

			},
			methods: {
				// 查询方法
				selectUserInfo: function(currentNum, currentSize) {
					// 在进入页面初始化查询时，该参数信息不存在，可以指定默认分页行为
					if (!currentNum) {
						currentNum = this.pageNum
					}
					if (!currentSize) {
						currentSize = this.pageSize
					}
					var that = this
					// 进行参数序列化处理
					var params = Qs.stringify(this.userBean)
					params += "&pageNum=" + currentNum + "&pageSize=" + currentSize
					// 发起请求
					axios.post("http://localhost:8086/getUserInfoByPage", params)
						.then(function(response) {
							console.log(response)
							// 将响应得到用户列表信息绑定在表格数据对象上
							that.tableData = response.data.list
							// 将条件筛选的表单对象清空
							that.userBean = {}
							// 将分页的属性进行赋值
							that.pageNum = response.data.pageNum
							that.pageSize = response.data.pageSize
							that.total = response.data.total

						})
				},
				// 新增操作
				addUserInfo: function() {
					// 将表单中的数据清空
					this.editUserInfo = {
						// 用于判断用户是新增还是修改的操作
						id: "",
						username: "",
						userpwd: "",
						useraddress: "",
						usertel: "",
						imgsrc:""
					}
					// 显示模态框
					this.dialogFormVisible = true

				},
				// 清空操作
				clearUserInfo: function() {
					// 将筛选的表单清空
					this.userBean = {}
					// 调用查询（执行查询全部的操作）
					this.selectUserInfo()

				},
				// 点击编辑操作时
				userinfoEdit: function(rowData) {
					// Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，
					// 获取该行数据
					// 绑定在编辑的数据对象上
					this.editUserInfo = rowData
					// 显示模态框
					this.dialogFormVisible = true


				},
				// 删除操作
				userinfoDelete: function(userId) {
					// 将用户的id属性绑定在删除对象的id属性中
					this.deleteUserInfo.id = userId
					var that = this
					var params = Qs.stringify(this.deleteUserInfo)
					// 删除进行消息提醒
					this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						// 当点击确定时，发起删除请求
						axios.post("http://localhost:8086/deleteUserInfo", params)
							.then(function(response) {
								console.log(response)
								if (response.data == "ok") {
									that.selectUserInfo()
								}
								that.$message({
									type: 'success',
									message: '删除成功!'
								});
							})
						// 点击取消，则取消删除行为
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});

				},
				// 执行新增、编辑时数据保存
				saveUserInfo: function() {
					var that = this
					var params = Qs.stringify(this.editUserInfo)
					axios.post("http://localhost:8086/editUserInfo", params)
						.then(function(response) {
							console.log(response)
							if (response.data == "ok") {
								that.dialogFormVisible = false
								that.selectUserInfo()
							}
						})
				},
				handleSelectionChange(val) {
					this.multipleSelection = val;
				},
				// 分页相关的
				// 当改变每页显示的条数时，会进行触发
				// 会将当前  页面显示的条数   返回来
				handleSizeChange: function(val) {
					console.log("handleSizeChange" + val)
					this.selectUserInfo(this.pageNum, val)
				},
				// 当  当前页  发生变化时，会触发（前一页、后一页）
				// 会将当前当前  页码  返回来
				handleCurrentChange: function(val) {
					console.log("handleCurrentChange" + val)
					this.selectUserInfo(val, this.pageSize)
				},
				// 图片上传处理
				uploadImg:function(param){
					console.log(param)
					var that=this
					var formData=new FormData()
					formData.append("file",param.file);
					axios.post("http://localhost:8086/upload", formData)
						.then(function(response) {
							console.log(response)
							that.editUserInfo.imgsrc=response.data
							console.log(that.editUserInfo)
						})				
				},
				// 图片上传前的钩子函数
				beforeAvatarUpload(file) {
					console.log(file.type)
					const isJPG = file.type === 'image/jpeg'||file.type === 'image/png'||file.type === 'image/jpg'||file.type === 'image/gif';
					const isLt2M = file.size / 1024 / 1024 < 2;

					if (!isJPG) {
						this.$message.error('上传头像图片只能是 JPG,PNG,GIF 格式!');
					}
					if (!isLt2M) {
						this.$message.error('上传头像图片大小不能超过 2MB!');
					}
					return isJPG && isLt2M;
				}


			},
			// 钩子函数，
			mounted() {
				// 默认进入该页面后显示用户列表信息
				this.selectUserInfo()
			}
		})
	</script>
</html>
